<template>
	<view >
		<view class="header">
			<view class="title">
				我的
			</view>
			<view class="avatar">
				<view class="avatar-left">
					<img src="../../static/avatar.png" alt="">
				</view>
				<view class="avatar-right">
					<view class="avatar-right-top">游客，你好</view>
					<view >签名码未开通</view>
				</view>
			</view>
			<!-- 是否开通vip -->
			<view class="vip">
				<view class="vip-icon">
					<img src="../../static/icon/vip.svg" alt="">
				</view>
				<view class="vip-content">
					<view class="vip-content-top">
						未开通
					</view>
					<view class="vip-content-bottom">
						解锁签名码尊享服务
					</view>
				</view>
				<view class="vip-btn">
					<button>立即开通</button>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-item bgcfff margin17 borderR10" @tap="toSignature()">
				<view class="list-item-icon">
					<img src="../../static/icon/record.svg" alt="">
				</view>
				<view class="list-item-text" >
					订单记录
				</view>
			</view>
			<view class="list-item bgcfff margin17 borderR10" >
				<view class="list-item-icon">
					<img src="../../static/icon/study.svg" alt="">
				</view>
				<view class="list-item-text">
					新手教程
				</view>
			</view>
			<view class="list-item bgcfff margin17 borderR10" >
				<view class="list-item-icon">
					<img src="../../static/icon/question.svg" alt="">
				</view>
				<view class="list-item-text">
					常见问题
				</view>
			</view>
			<view class="list-item bgcfff margin17 borderR10" @tap="toBuyrecord" >
				<view class="list-item-icon">
					<img src="../../static/icon/cart.svg" alt="">
				</view>
				<view class="list-item-text">
					购买记录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		methods:{
			toSignature(){
				uni.navigateTo({
					url:`/pages/mine/signature`,
				})
			},
			toBuyrecord(){
				uni.navigateTo({
					url:`/pages/mine/buyrecord`,
				})
			}
		}
	}
</script>

<style lang="scss">
	.header{
		height: 530upx;
		padding-left: 60upx;
		background: linear-gradient(180deg, #C7DBFF 0%, #FFFFFF 103%);
		.title{
			padding-top: 100upx;
			font-size: 36upx;
			font-weight: 500;
			color: #000000;
		}
		.avatar{
			display: flex;
			margin-top: 30upx;
			align-items: center;
			&-left{
				width: 140upx;
				height: 140upx;
				border-radius: 50%;
				overflow: hidden;
				img{
					width: 100%;
				}
			}
			&-right{
				margin-left: 24upx;
				&-top{
					margin-bottom: 10upx;
					font-size: 36upx;
					font-weight: 700;
				}
			}
		}
		.vip{
			display: flex;
			height: 164upx;
			margin-top: 54upx;
			margin-right: 34upx;
			margin-left: -26upx;
			padding-top: 44upx;
			background-image: url('../../static/minebg.png');
			background-size: contain;
			background-repeat: no-repeat;
			
			&-icon{
				flex: 1;
				margin-left: 40upx;
			}
			&-content{
				margin-left: 14upx;
				flex: 7;
				&-top{
					color: #F4F4F4;
					font-size: 36upx;
					font-weight: 500;
				}
				&-bottom{
					color: #A8A8A8;
					font-size: 24upx;
					font-weight: 500;
				}
			}
			&-btn{
				flex: 5;
				button{
					display: flex;
					align-items: center;
					width: 154upx;
					height: 60upx;
					border-radius: 100upx;
					font-size: 24upx;
					color: #704C03;
					font-weight: 500;
					background: linear-gradient(90deg, #FEEDAF -17%, #FFFFFF 129%, #FFF6DD 129%);
				}
			}
		}
		
	}
	
	.list{
		background-color: #ecf0f5;
		&-item{
			display: flex;
			height: 146upx;
			margin-top: 24upx;
			align-items: center;
			font-size: 32upx;
			color: #333333;
			&:nth-child(1){
				margin-top: 36upx;
			}
			&-icon{
				display: flex;
				align-items: center;
				margin-left: 40upx;
				margin-right: 24upx;
			}
		}
		
	}
</style>